<template>
    <div class="contentPage">
          <div class="top">
            <div class="topFont">
                <span class="topIocn el-icon-tickets"></span>
                <span> 账户商品库</span>
            </div>
            <div class="topTeach">
                <ul class="clearfix cd-serchUl">
                    <li>
                        <!-- <el-cascader :options="companyData" :props="props" placeholder="请选择公司" @change='changeVal' clearable change-on-select v-model="search.companyId">
                        </el-cascader> -->
                    </li>
                    <li>
                        <el-select v-model="search.name" @change='changeVal' default-first-option filterable placeholder="请输入商品名称" clearable>
                            <el-option v-for="item in shopsPageData" :key="item.id" :label="item.name" :value="item.name">
                            </el-option>
                        </el-select>
                        <!-- <el-autocomplete popper-class="my-autocomplete" v-model="shopName" :fetch-suggestions="" placeholder="请输入内容" @select="handleSelect">
							<i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick">
							</i>
							<template slot-scope="props">
								<div class="name">{{ props.item.name }}{{ props.item.standard }}</div>
							
							</template>
						</el-autocomplete> -->
                    </li>
                    <li>
                        <el-input v-model="search.barCode" @keyup.enter.native="searchEnter" clearable placeholder="请输入条形码"></el-input>

                    </li>
                    <li>
                        <el-select v-model="search.hotVal" @change='changeVal' placeholder="请选择是否热销" clearable>
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                <span style="float: left">{{ item.label }}</span>

                            </el-option>
                        </el-select>
                    </li>

                    <li>
                        <el-button type="primary" icon="el-icon-search" @click='changeVal'>查询</el-button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main" v-cloak>
            <el-table ref="nana" v-cloak id="mybox" height="100%" :data="pageData" style="width:100%;height:100%" :default-sort="{prop: 'date', order: 'descending'}">
                <el-table-column type="index" min-width="60" fixed></el-table-column>
                <el-table-column prop="name" fixed label="商品名称" min-width='160px'>
                </el-table-column>
                <el-table-column prop="salesCount" label="上架货道" min-width='80px'>
                    <template slot-scope="scope">
                        <p style="color:blue;cursor: pointer;width: 100%" @click='putaway(scope.row)'>{{scope.row.salesCount}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="barCode" label="条形码" min-width='120px'>
                </el-table-column>
                <el-table-column prop="standard" label="规格" min-width='70px'>
                </el-table-column>
                <el-table-column prop="costPrice" label="成本价(元)" sortable min-width='110px'>
                </el-table-column>
                <el-table-column prop="price" label="销售价(元)" sortable min-width='110px'>
                </el-table-column>
                <el-table-column prop="endTime" label="过期时间" min-width='130px'>
                    <template slot-scope="scope">
                        <span>{{scope.row.endTime | capitalize}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="pic" label="商品图片" min-width='120px'>
                    <template slot-scope="scope">
                        <img :src="rootImg+scope.row.pic" width='30' alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="barCode" label="条形码" min-width='130px'>
                </el-table-column>
                <el-table-column prop="unit" label="商品单位" min-width='100px'>
                </el-table-column>
                <el-table-column prop="companyName" label="所属公司" min-width='130px'>
                </el-table-column>
            </el-table>
        </div>
        <div class="foot" v-cloak>
            <!-- 分页 -->
            <div class="panel footer_list" v-cloak>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="currentPage" :page-sizes="[50,100,150]" :page-size="50" layout="sizes, prev, pager, next, jumper" :total="totalResult">
                </el-pagination>
            </div>
        </div>
        <!-- 表格模态框 -->
        <el-dialog title="上架详情" :visible.sync="dialogTableVisible">
            <el-table :data="gridData" show-summary height="350" border style="width: 100%">
                <el-table-column prop="vendingMachinesCode" label="售货机编号">
                </el-table-column>
                <el-table-column prop="wayNumberCount" label="货道数量">
                </el-table-column>
                <el-table-column prop="num" label="商品数量">
                </el-table-column>
            </el-table>
        </el-dialog>
       
    </div>
</template>

<script>
import myCompany from "../common/companyId";


export default {
  data() {
    return {
      options: [
        {
          label: "热销",
          value: "1"
        },
        {
          label: "非热销",
          value: "0"
        }
      ],
      shopsPageData: [],
      companyData: [],
      search: {
        companyId: "",
        barCode: "",
        hotVal: "",
        name: ""
      },
      props: {
        label: "label",
        value: "value",
        children: "children"
      },
      gridData: "",
      restaurants: [],
      shopName: "",
      dialogTableVisible: false,

      //分页初始化
      pageSize: "",
      currentPage: 1,
      totalResult: 0,
      pageNum: 1,
      pageData: []
    };
  },
  mounted: function() {
    this.page();
    // this.shopsPage() //商品查询S
    // this.getCompany() //所属公司
  },
  filters: {
    capitalize: function(inputTime) {
      if (inputTime == "" || inputTime === undefined || inputTime == null) {
        return "";
      }
      var date = new Date(inputTime);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      var second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    }
  },
  methods: {
    handleSizeChange: function(val) {
      this.pageSize = val;
      this.page();
    },
    handleCurrentChange: function(val) {
      this.pageNum = val;
      this.page();
    },
    page: function() {
      var loading = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      var index = this.search.companyId.length;
      var companyId = this.search.companyId[index - 1];

      this.$axios.get("/ws-microservice-backstage/vmItem/findPage", {
          params: {
            companyId: companyId,
            page: this.pageNum,
            pageSize: this.pageSize,
            name: this.search.name,
            barCode: this.search.barCode,
            hot: this.search.hotVal
          }
        })
        .then(response => {
          loading.close();
          if (response.data.code == 0) {
            this.pageData = response.data.data.res;
            this.currentPage = response.data.data.page.currentPage;
            //this.currentPage = this.pageNum
            this.totalResult = response.data.data.page.totalResult;
          } else {
            this.pageData = "";
            return;
          }
        })
        .catch(error => {});
    },
    getCompany: function() {
       this.$axios
        .get("/ws-microservice-backstage/company/getCompanyTree", {
          params: {}
        })
        .then(function(response) {
          this.companyData.push(response.data.data);
        })
        .catch(function(error) {});
    },
    shopsPage: function() {
      this.$axios
        .get("/ws-microservice-backstage/itemBasic/findAll", {
          params: {}
        })
        .then(function(response) {
          this.shopsPageData = response.data.data;
        })
        .catch(function(error) {
          // errorBack()
        });
    },
    searchEnter: function(e) {
      if (e.keyCode == 13) {
        this.pageNum = 1;
        this.page();
      }
    },
    //热销
    changeVal: function() {
      this.pageNum = 1;

      this.page();
    },
    putaway: function(item) {
      if (item.salesCount == 0) {
        this.$message({
          message: "暂无上架机器",
          type: "warning"
        });
        return;
      } else {
        this.dialogTableVisible = true;

        this.axios
          .get("/ws-microservice-backstage/vmItem/findSaleMachines", {
            params: {
              id: item.itemId
            }
          })
          .then(function(response) {
            this.gridData = response.data.data;
            // this.companyData = response.data.data
          })
          .catch(function(error) {
            // errorBack()
          });
      }
    }
  }
};
</script>

<style scoped>
</style>
